<script setup lang="ts">

</script>

<template>
  <div class="image-container">
<!--    <img      class="rounded-2xl cover-image"       src="../../src/assets/img/python.png"      alt="Python"    >-->
    <img      class="rounded-2xl cover-image"       src="../../src/assets/img/ai.png"      alt="Python"    >

  </div>

</template>

<style scoped>
.image-container {
  width: 100%; /* 可根据需求修改为 80%、50% 等百分比 */
  height: 275px; /* 固定高度 */
  position: relative;
  overflow: hidden; /* 关键：隐藏超出容器的图片部分 */
  border-radius: 1rem; /* 对应 rounded-2xl（如果外部没生效可保留） */
}
.cover-image {
  width: 100%; /* 宽度跟随容器百分比 */
  height: 100%; /* 高度铺满容器 */
  object-fit: cover; /* 核心：居中裁剪，保持图片比例，填满容器 */
  object-position: center; /* 辅助：确保裁剪时以图片中心为基准（默认就是center，可省略） */
  display: block;
}
</style>